import React from 'react'
import { connectProduct } from '../../container/product/connectProduct'
import Title from '../index/IndexTitle'
import Info from './ProductInfo'
import Select from './ProductSelect'
import Details from './ProductDetails'
import TabBar from './ProductTabBar'
import Params from './ProductParams'

class Product extends React.Component {
	componentDidMount() {
		this.props.goodActions.fetchGoodDetails(this.props.params.goodsId)
	}

	render() {
		const goodData = this.props.good.goodData;
		const shoppingCartActions = this.props.shoppingCartActions;
		return (
			<div style={{marginTop: '55px', paddingBottom: '50px'}} >
                <Title />
                <Info goodData={goodData} />
                <Select 
                	goodData={goodData} 
                	shoppingCartActions={shoppingCartActions} 
                	goodsId={this.props.params.goodsId}
                	isAdded={this.props.cart.isAdded}
                	storeId={this.props.params.storeId}
                />
                <Params goodData={goodData} />
                <Details goodData={goodData} />
                <TabBar 
                    goodData={goodData} 
                    shoppingCartActions={shoppingCartActions} 
                    goodsId={this.props.params.goodsId}
                    isAdded={this.props.cart.isAdded}
                    storeId={this.props.params.storeId}
                />
            </div>
		);
	}
}

export default connectProduct(Product)